<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div"><img src="../../assets/zjt2.png" alt="" class="back" @click="back()" /></div>
        <div class="head-search">个人验证</div>
        <div class="head-div">上传审核</div>
      </div>
    </div>
    <div class="content">
        <div class="block">
            <div class="block-left">毕业证书</div>
            <div class="block-right">
                <img src="../../assets/zhengshu.jpg" alt="">
                <span>点击图片即可上传文件</span>
            </div>
        </div>
        <div class="block">
            <div class="block-left">身份证正面</div>
            <div class="block-right">
                <img src="../../assets/idCard.png" alt="">
                <span>点击图片即可上传文件</span>
            </div>
        </div>
        <div class="block">
            <div class="block-left">身份证反面</div>
            <div class="block-right">
                <img src="../../assets/idCard1.png" alt="">
                <span>点击图片即可上传文件</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { Actionsheet } from 'mint-ui';
export default {
  inject: ["reload"],
  name: "checking",
  components: {Actionsheet},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      actions:[{name:"111"},{name:"222"}],
      sheetVisible:true
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  /* width: 80%; */
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.head-div{
    width: 15%;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.block{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
}
.block-left{
    font-size: 14px;
    width: 100px;
    box-sizing: border-box;
}
.block-right{
    display: flex;
    flex-flow: column;
    font-size: 12px;
    color: #757575;
}
.block-right img{
    width:250px;
    height: 150px;
    margin-bottom: 10px;
}
</style>
